<template>
	<view class="content">

		<u-subsection :list="toplist" mode="button" :bgColor="'#ffffff'" @change="topselect"
			:current="current"></u-subsection>


		<view class="content">
			<view class="top">
				<u-tabs :list="typelist" @click="selecttype"></u-tabs>
			</view>
			<view class="data">
				<view class="data-left" v-if="uni.getStorageSync('empid')==1">
					<view class="left-title">
						门店总额
					</view>
					<view class="left-price">
						{{ storecountmoney }}
					</view>
				</view>
				<view class="data-left" v-else>
					<view class="left-title">
						金额
					</view>
					<view class="left-price">
						{{ amount }}
					</view>
				</view>
				<view class="data-right" v-if="uni.getStorageSync('empid')==1">
					<view class="right-title">
						门店总单
					</view>
					<view class="right-math">
						{{ storecountorder }}
					</view>
				</view>
				<view class="data-right" v-else>
					<view class="right-title">
						订单(单)
					</view>
					<view class="right-math">
						{{ total }}
					</view>
				</view>
			</view>
			<view class="progress">
				<u-line-progress :percentage="30" activeColor="#ff0000"></u-line-progress>
			</view>
		</view>

		<u-picker :show="showyear" @confirm="confirm" @cancel="cancel" :columns="yearlist"></u-picker>
		<u-picker :show="showyeji" @confirm="confirmyeji" @cancel="cancelyeji" :columns="yejilist"></u-picker>
		
		<view v-if="uni.getStorageSync('empid')==1" class="charts-box1">
			<view>
				<h4 >年度总额：</h4>
			</view>
			<qiun-data-charts type="pie" :opts="opts1" :chartData="chartData1" />
		</view>
		<view v-if="uni.getStorageSync('empid')==1" class="charts-box2">
			<view>
				<h4 >年度总订单：</h4>
			</view>
			<qiun-data-charts type="pie" :opts="opts2" :chartData="chartData2" />
		</view>

		<view v-else class="charts-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
	



		<u-grid :col="5" :border="true" v-if=" uni.getStorageSync('empid')==1">
			<u-grid-item :customStyle="ItemStyle">
				<text>时间</text>
			</u-grid-item>
			<u-grid-item :customStyle="ItemStyle">
				<text>目标(元)</text>
			</u-grid-item>
			<u-grid-item :customStyle="ItemStyle">
				<text>完成(元)</text>
			</u-grid-item>
			<u-grid-item :customStyle="ItemStyle">
				<text>订单总数</text>
			</u-grid-item>
			<u-grid-item :customStyle="ItemStyle">
				<text>完成度</text>
			</u-grid-item>
			<u-grid :col="5" :border="true" v-for="item in tablist" :key="item.id">
				<u-grid-item :customStyle="ItemBoder">
					<text @click="getdate(item.date)">{{ item.date }}</text>
				</u-grid-item>
				<u-grid-item :customStyle="ItemStyle">
					<text>{{ item.target }}</text>
				</u-grid-item>
				<u-grid-item :customStyle="ItemStyle">
					<text>{{ item.completeprice }}</text>
				</u-grid-item>
				<u-grid-item :customStyle="ItemStyle">
					<text>{{ item.ordertotal }}</text>
				</u-grid-item>
				<u-grid-item :customStyle="ItemStyle">
					<text>{{ item.complete }}</text>
				</u-grid-item>

			</u-grid>

		</u-grid>

	</view>
</template>

<script>
export default {
	onLoad() {

		


		this.auth = uni.getStorageSync('auth') ? uni.getStorageSync('auth') : {}
		
		// this.empid = uni.getStorageSync("empid") ? uni.getStorageSync("empid") : this.empid

		uni.showLoading({
			title: '加载中',
		});
		this.analysis()
		this.getyears()
		this.getindexlist()


	},
	created() {

		this.timer = setInterval(() => {

			this.$u.count.check()

		}, 15000);

	},

	beforeDestroy() {
		clearInterval(this.timer)
	},

	


	data() {

		return {
			curNow: 0,
			empid: "",
			ItemStyle: {
				padding: '1em 0em',
			},
	
			storecountmoney:0,
			storecountorder:0,
			ItemBoder: {
				padding: '1em 0em',
				color: "blue"


			},
			auth: {},
			filterResultData: [],
			yearlist: [],
			yearshow: false,
			toplist: [],
			tablelist:[],
			storenamelist:[],
			current: 0,
			yejitype: "",
			total: 0,
			opts1: {
				color: [  "#73C0DE","#FC8452", "#9A60B4", "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#3CA272","#ea7ccc"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					}
				}
			},
			opts2: {
				color: [    "#FAC858","#ea7ccc","#3CA272","#73C0DE","#FC8452", "#9A60B4", "#1890FF", "#91CB74", "#EE6666"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					}
				}
			},
			amount: 0,
			indexlist: [],
			showyear: false,
			bosslook:[],
			showyeji: false,
			yejilist: [
				["个人业绩", "门店业绩"]
			],
			filterResultData: [],
			chartData: {},
			chartData1: {},
			chartData2: {},
			opts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [15, 10, 0, 15],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					}

				}
			},
			type: "",


			typelist: [],
			tablist: [],
			list: [],
			indexdata: [],
			yejitype: "个人业绩",
			year: ""
		}
	},

	methods: {

		// 选中类型
		selecttype(e) {
			uni.showLoading({
				title: '加载中',
			});
			
			let date = new Date();

			this.year = date.getFullYear() + "年"

			this.type = e.type

			this.getindexlist({ type: this.type, year: this.year })
			
			

		},
		async getindexlist(e) {
			let date = new Date();

			this.year = date.getFullYear() + "年"
			if (e) {
				this.year = e.year
				this.yejitype = e.yejitype ? e.yejitype : ""
				this.type = e.type
			}
			let data = {
				adminid: this.empid,
				empid: this.empid,
				stoid: this.auth.stoid,
				year: this.year,
				yejitype: this.yejitype,
				type: this.type

			}


			let result = await this.$u.api.admin.indexdata(data)
			if (result.code) {
				// 最高管理员赋值的数据
				if(this.empid==1)
				{

					let res = {
						series:[
							{
								data: result.data.list
							},
						]
					}

					let res2 = {
						series:[
							{
								data: result.data.ordercountlist
							},
						]
					}

					// 转化成对象
					this.chartData1 = JSON.parse(JSON.stringify(res));
					this.chartData2 = JSON.parse(JSON.stringify(res2));
					this.storecountorder = result.data.storecountorder
					this.storecountmoney = result.data.storecountmoney
					this.chartData = result.data.chart

				



				}
				this.chartData = result.data.chart
				this.total = result.data.total
				this.amount = result.data.amount
				this.typelist = result.data.typelist
				this.tablist = result.data.tablist,

				uni.hideLoading();
			}
		},
		topselect(e) {

			this.current = e//分段器移动的位置

			if (e == 0) {
				this.showyear = true
			} else if (e == 1) {
				this.showyeji = true
			} else {
				console.log(this.auth.is)
				if (this.empid == 1) {
					uni.$u.route({
						url: "/pagesA/admin/filteradmin"
					})
				} else {
					uni.showToast({
						title: '您暂没权限',
						icon: 'none'
					})
				}

			}


		},
		confirm(e) {
			if (e.value[0] != "") {
				this.getindexlist({ year: e.value[0] })
				this.analysis({ year: e.value[0] })

			}
			this.showyear = false
		},
		confirmyeji(e) {
			console.log(e)
			if (e.value[0] != "") {
				this.getindexlist({ yejitype: e.value[0] })
				this.analysis({ yejitype: e.value[0] })


			}

			this.showyeji = false


		},
		cancel() {
			this.showyear = false
		},
		cancelyeji() {
			this.showyeji = false
		},
		async getyears() {
			let data = {
				adminid: this.empid
			}

			let result = await this.$u.api.admin.getyearlist(data)
			if (result.code) {
				this.yearlist = result.data
			}
		},
		getdate(e) {
			uni.$u.route({
				url: "/pagesA/admin/fenxilist",
				params: {
					date: e,
					empid: this.empid,
				}
			})
		},
		


		async analysis(e) {
			console.log(e)
			if (e) {
				this.year = e.year
				this.yejitype = e.yejitype
			}
			let data = {
				adminid: this.empid,
				year: this.year,
				yejitype: this.yejitype

			}

			let result = await this.$u.api.admin.toptitle(data)
			if (result.code) {
				this.toplist = result.data
				// console.log(toplist)

				this.year = result.data[0]

			}
		}
	}
}
</script>

<style lang="scss">
.content {
	background-color: #ffffff;
}

.charts-box2 {
    width: 90%;
    height: 300px;
	margin: 0 auto;
  }
.charts-box1 {
    width: 90%;
    height: 300px;
	margin: 0 auto;
  }


// .u-tabs__wrapper__nav.data-v-0de61367{
// 	background: #ffffff;
// 	display: flex;
// 	;
// }

.top {
	width: 100%;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
}

.content {
	width: 100%;
	margin: 20rpx auto;
	height: 380rpx;
	background-color: #fff;

	.data {
		display: flex;
		height: 200rpx;

		.data-left {
			width: 50%;
			text-align: center;
			height: 250rpx;

			.left-title {
				margin-top: 90rpx;
			}

			.left-price {
				margin-top: 10rpx;
			}
		}

		.data-right {
			width: 50%;
			text-align: center;
			height: 250rpx;

			.right-title {
				margin-top: 90rpx;
			}

			.right-math {
				margin-top: 10rpx;
			}
		}
	}

	.progress {
		height: 50rpx;
		padding: 20rpx;
	}
}

.charts-box {
	width: 100%;
	height: 300px;
	background-color: #fff;
}

.table {
	width: 100%;
	height: auto;
	background-color: #fff;
	margin-top: 20rpx;
}

.my-td-p.data-v-2adce8a4 {

	border: 1px solid #eeeeee;
}

.grid-text {
	font-size: 14px;
	color: #222222;
	padding: 10rpx 0 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}


.u-grid-item.data-v-99a45d26 {
	border: 0.2px solid #eeeeee;
}
</style>
